/**
  * @Author: songgh
  * @Date: 2021-09-20 14:41:08
  * @LastEditors: songgh
  * @LastEditTime: 2021-09-20 15:41:08
  * @Description: 服务
  */
import { defineComponent } from "@vue/runtime-core";
import { useRouter } from 'vue-router'
import topicImg from '@src/assets/topic.png';

interface IList{
  title?:string;
  description?:string;
  iconType?:string;
  router?:string;
  bgGradient?: string;
}

export default defineComponent({
  name: "Home",
  setup() {
    const router = useRouter();

    const list:Array<IList> = [
      {
        title: "服务信息填报",
        description: "填报个人服务信息",
        iconType: "icon-tianxie",
        router: "/service-form",
        bgGradient: `linear-gradient(135deg, #B1D950 , 50%, #54D5C9);`
      },
      {
        title: "服务信息查询",
        description: "查询个人历史服务信息",
        iconType: "icon-chakan",
        router: "/service-list",
        bgGradient: `linear-gradient(135deg, #6ED5EC,  60%, #44D496 );`
      }
    ];

    return ()=>(
      <div class="home">
        <img src={ topicImg }  alt="" />
        <div class="home-body h-80 px-3 py-3 flex flex-col justify-between">
          <h1 class="font-semibold text-lg">日常工作</h1>
          {
            list.map(item => (
              <div
                class="p-5 rounded-md text-white flex justify-between shadow-lg tracking-wider"
                style={`background-image: ${item.bgGradient}`}
                onClick={() => router.push(item.router)}
              >
                <div>
                  <h2 class="text-white font-semibold text-lg">{item.title}</h2>
                  <p class="mt-1">{item.description}</p>
                </div>
                <van-icon class-prefix={`opacity-30 mt-1 -mb-5 iconfont ${item.iconType}`} size="4rem" name="extra" />
              </div>
            ))
          }
        </div>
      </div>
    )
  }
});